<template>
  <div>
    <div class="layout-content control-content">
      <!-- 查询表单 -->
      <Form ref="formInline" inline class="from-content">
        <FormItem label="姓名" :label-width="60">
          <Input type="text" v-model="Name" placeholder="请输入姓名" />
        </FormItem>
        <FormItem label="职务" :label-width="60">
          <Select v-model="Yszw">
            <Option value="全部">全部</Option>
            <Option :value="item.Id" v-for="item in YSZW_LIST" :key="item.id">{{item.Name}}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="search()">查询</Button>
        </FormItem>
      </Form>
    </div>
    <div class="layout-content main-content">
      <div class="table-title-warp">
        <div class="table-title">
          <Icon type="ios-people" :size="20" />医生列表
        </div>
        <div class="table-title-right">
          <Button type="primary" class="add-button" size="small"  @click="add('新增医生')">
            <Icon type="md-add" />新增医生
          </Button>
        </div>
      </div>

      <Table ref="table" border :columns="fields" :data="tabledata" :height="tableHeight">
        <!-- table 操作 -->
        <template slot-scope="{ row,index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="add('编辑医生',row.id,index)">编辑</Button>
          <Button type="error" size="small" style="margin-right: 5px" @click="remove(row.Id,index)">删除</Button>
          <Button type="error" size="small" v-if="row.Openid" @click="wechat(row.Id,index)">解除微信</Button>
        </template>
      </Table>
      <!-- 分页区域 -->
      <div class="page-cut">
          <Page :total="count" size="small" show-elevator :current="page" @on-change="pageData" />
      </div>
    </div>

    <!-- 新增编辑弹窗 -->
    <Modal
      v-model="modal_visable"
      :title="modal_title"
      :loading="modalLoading"
      @on-visible-change="reset_modal_form()"
      :mask-closable="false"
    >
      <Form ref="modal_form" :model="modal_form" :rules="modal_form_rules">
        <FormItem prop="Account" label="医生编号" :label-width="70">
          <Input type="text" v-model="modal_form.Account" placeholder="请输入医生编号" />
        </FormItem>
        <FormItem prop="Nickname" label="医生姓名" :label-width="70">
          <Input type="text" v-model="modal_form.Nickname" placeholder="请输入医生姓名" />
        </FormItem>
        <FormItem prop="Memberlevel" label="职务" :label-width="70">
          <Select v-model="modal_form.Memberlevel">
            <Option :value="item.Id" v-for="item in YSZW_LIST" :key="item.Id">{{item.Name}}</Option>
          </Select>
        </FormItem>
        <FormItem prop="Mobile" label="联系电话" :label-width="70">
          <Input type="text" v-model="modal_form.Mobile" placeholder="请输入联系电话" />
        </FormItem>
        <FormItem prop="Parent_id" label="上级领导" :label-width="70">
          <Select v-model="modal_form.Parent_id" placeholder="请选择上级领导">
            <Option v-for="item in MEMBER_LIST" :value="item.Id" :key="item.Id">{{item.Nickname}}</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="modal_cancel">取消</Button>
        <Button type="primary" @click="modal_ok">确定</Button>
      </div>
    </Modal>
    <!-- 新增编辑弹窗 -->
  </div>
</template>

<script>
import mixin from "../Mixin/mix";
import { constants } from "crypto";
import request from "../../request";
export default {
  data() {
    return {
      // 弹层显示状态
      modal_visable: false,
      modal_title: "新增医生",
      modalLoading: false,
      // 查询表单
      Name: "",
      Yszw: "全部",
      page:1,
      count:0,
      MEMBER_LIST:[],
      YSZW_LIST:[],
      // 表格字段
      fields: [
        {
          title: "医生编号",
          key: "Account"
        },
        {
          title: "医生姓名",
          key: "Nickname"
        },
        {
          title: "职务",
          key: "Aname"
        },
        {
          title: "上级领导",
          key: "Pname"
        },
        {
          title: "联系电话",
          key: "Mobile"
        },
        {
          title: "操作",
          slot: "action",
          width: 200,
          align: "center"
        }
      ],
      // 表格数据
      tabledata: [],

      // 弹层表单
      modal_form: {
        Account: "",
        Nickname: "",
        Memberlevel: "",
        Parent_id: "",
        Mobile: "",
        Id: ""
      },
      // 弹层表单校验规则
      modal_form_rules: {
        // Account: [{ required: true, message: "必填项", trigger: "blur" }],
        // Nickname: [{ required: true, message: "必填项", trigger: "blur" }],
        // Memberlevel: [{ required: true, message: "必填项", trigger: "blur" }],
        // Parent_id: [{ required: true, message: "必填项", trigger: "blur" }],
        // Mobile: [{ required: true, message: "必填项", trigger: "blur" }]
      },
      YSZW_LIST: []
    };
  },
  mixins: [mixin],
  beforeMount() {
    this.loadData();
  },

  methods: {
    pageData(page){
      console.log(page);
      
      this.page = page
      this.loadData();
    },
    // 获取数据
    loadData() {
      request(
        "/api/Doctor/YsList",
        "post",
        { Name: this.Name, Yszw: this.Yszw, page: this.page },
        true
      ).then(res => {
        console.log(res);
        this.tabledata = res.data.data.list;
        this.YSZW_LIST = res.data.data.YSZW_LIST;
        this.MEMBER_LIST = res.data.data.MEMBER_LIST;
        this.count = res.data.data.count;
      });
    },
    // 搜索
    search() {
      this.loadData();
    },
    // action 点击添加
    add(title,id='0',index='-1') {
      this.modal_title = title;
      this.modal_visable = true;
      if(index >= 0){
        this.modal_form = {
          Id:this.tabledata[index].Id,
          Nickname:this.tabledata[index].Nickname,
          Account:this.tabledata[index].Account,
          Memberlevel:this.tabledata[index].Memberlevel,
          Mobile:this.tabledata[index].Mobile,
          MemberGroup:1,
          Parent_id:this.tabledata[index].Parent_id,
        };
        console.log(this.modal_form);
      }else{
        this.modal_form = {
          Id:'0',
          Nickname:'',
          Account:'',
          Memberlevel:'',
          Mobile:'',
          MemberGroup:1,
          Parent_id:0,
        };
      }
    },
    remove(id,index) {
      this.$Modal.confirm({
          title: '操作提示',
          content: '<p>您确认要删除吗？</p>',
          loading: true,
          onOk: () => {
               this.ajax('api/Doctor/YsDel/',"post",{Id:id},true).then(res => {
                  setTimeout(() => {
                    this.$Modal.remove();
                    if(res.data.code == 200){
                      this.tabledata.splice(index, 1);
                    }
                    this.$Notice.success({
                        title: '操作提示',
                        desc:res.data.msg
                    });
                  }, 500);
              });
          },
          onCancel: () => {
              this.$Message.info('取消操作');
          }
      });
    },
    // 弹层点击确定回调
    modal_ok() {
      this.$refs["modal_form"].validate((valid) => {
          if (valid) {
              var param = this.modal_form
              if(!param['Account']){
                this.$Message.error('请填写医生编号!');
                return false;
              }
              if(!param['Nickname']){
                this.$Message.error('请填写医生姓名!');
                return false;
              }
              if(!param['Memberlevel']){
                this.$Message.error('请选择医生职位!');
                return false;
              }
              if(!param['Mobile']){
                this.$Message.error('请填写联系电话!');
                return false;
              }
              if(!(/^1[3456789]\d{9}$/.test(param['Mobile']))){ 
                this.$Message.error('手机号码有误，请重填!');
                return false;
              } 
              this.ajax('api/Doctor/YsInfo/',"post", param,true).then(res => {
                console.log(res);
                
                this.$Notice.success({
                    title: '操作提示',
                    desc:res.data.msg
                });
                if(res.data.code == 200){
                  this.loadData();
                }
                this.modal_visable=false;
              });
          } else {
              this.$Message.error('请填写必填项');
          }
      })
    },
    wechat(id,index){
      this.$Modal.confirm({
          title: '操作提示',
          content: '<p>是否要解除微信绑定？</p>',
          loading: true,
          onOk: () => {
               this.ajax('api/Doctor/YsWechat/',"post",{Id:id},true).then(res => {
                  setTimeout(() => {
                    this.$Modal.remove();
                    if(res.data.code == 200){
                      this.tabledata[index].Openid = "";
                    }
                    this.$Notice.success({
                        title: '操作提示',
                        desc:res.data.msg
                    });
                  }, 500);
              });
          },
          onCancel: () => {
              this.$Message.info('取消操作');
          }
      });
    },
    // 弹层点击确定回调
    modal_cancel() {
      // 弹层取消点击回调
      this.modal_visable = false;
    },
    // 弹层显示状态转变后清空表单
    reset_modal_form() {
      this.$refs["modal_form"].resetFields();
    }
  }
};
</script>

<style scoped>
@import "../../style/base.css";
</style>
